<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>法狮龙家居门店数据大屏</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./fonts/icomoon.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1971523_j01vigdin0o.css">
</head>

<body>
    <div class="viewport">
        <div class="header">
            <h1>法狮龙家居门店数据大屏</h1>
            <div class="date" id="date"><img src="images/clock.png" alt="" class="clock"><span id="year"></span></div>
        </div>
        <div class="main">
            <div class="column" style="display: flex;flex-direction: column; flex: 1;">
                <div style="flex: 1;display: flex;">
                    <!-- 全国门店数 -->
                    <div
                        style="display: flex;flex-direction: column;flex: 1;margin-right: 20px;height: 100%;width: 100%;">
                        <div class="order panel" style="flex: .6;">
                            <div class="inner" style="display: flex;flex-direction: column;flex: .6;">
                                <div class="data" style="flex: .1;">
                                    <span style="font-size: 1rem; color: #FFFFFF;">
                                        <i class="iconfont" style="font-size: 1rem;color: #4c9bfd;">&#xe63f;</i>
                                        全国门店总数 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a style="font-size: 1.8rem;"
                                            id="all_agent_num">
                                        </a> <a href="" style="color: #FFFFFF;font-size: .8rem;">家</a>
                                    </span>
                                </div>

                                <div
                                    style="display: flex; flex-direction: column;flex: 1;justify-content:space-around;">
                                    <div class="dayOrder" style="display: flex;justify-content: space-between;">
                                        <p style="font-size: 1rem;color: #FFFFFF;">
                                            <em> <i class="iconfont"
                                                    style="font-size: 1rem;color: #4c9bfd;margin-right: 5px;">&#xe63f;</i>新5代店:</em>
                                            <em class="padding" id="new_five_agent_num"
                                                style="font-size: 1.8rem;"></em><a href=""
                                                style="color: #FFFFFF;font-size: .8rem;">家</a>
                                        </p>
                                        <p style="font-size: 1rem;color: #FFFFFF;">
                                            <em> <i class="iconfont"
                                                    style="font-size: 1rem;color: #4c9bfd;margin-right: 5px;">&#xe63f;</i>老5代店:</em>
                                            <em class="padding" id="old_five_agent_num"
                                                style="font-size: 1.8rem;"></em><a href=""
                                                style="color: #FFFFFF;font-size: .8rem;">家</a>
                                        </p>
                                        <p style="font-size: 1rem;color: #FFFFFF;">
                                            <em> <i class="iconfont"
                                                    style="font-size: 1rem;color: #4c9bfd;margin-right: 5px;">&#xe63f;</i>4代店:</em>
                                            <em class="padding" id="four_agent_num" style="font-size: 1.8rem;"></em><a
                                                href="" style="color: #FFFFFF;font-size: .8rem;">家</a>
                                        </p>
                                    </div>
                                    <div style="display: flex;justify-content: space-between;">
                                        <p style="font-size: 1rem;color: #FFFFFF;display: flex;" id="new" class="area">
                                            <span style="font-size: 1rem;color: #FFFFFF;">新5代店平均面积:</span><span
                                                id="newArea"></span>
                                        </p>
                                        <p style="font-size: 1rem;color: #FFFFFF;display: flex;" id="old" class="area2">
                                            <span style="font-size: 1rem;color: #FFFFFF;">老5代店平均面积:</span><span
                                                id="oldArea"></span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 改装 重装 -->
                        <div style="display: flex;flex:1;">
                            <div class="monthlyOrder panel" style="flex: 1;margin-right:10px;">
                                <div class="inner">
                                    <div class="refit"
                                        style="display: flex;flex-direction: column;flex: 1;justify-content: center;align-items: center;justify-content: space-around;">
                                        <p style="font-size: 1rem;color: #FFFFFF;">
                                            <i class="iconfont"
                                                style="font-size: 1rem;color: #4c9bfd;margin-right: 5px;">&#xe63f;</i>待调整区域
                                        </p>
                                        <p> <span style="font-size: 5rem;color: #FCB14C;" id="not_refit_num"></span><a
                                                href="" style="color: #FFFFFF;font-size: .8rem;">家</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="monthlyOrder panel" style="flex: 1;">
                                <div class="inner">
                                    <div class="reset"
                                        style="display: flex;flex-direction: column;flex: 1;justify-content: center;align-items: center;justify-content: space-around;">
                                        <p style="font-size: 1rem;color: #FFFFFF;">
                                            <i class="iconfont"
                                                style="font-size: 1rem;color: #4c9bfd;margin-right: 5px;">&#xe63f;</i>待重装门店
                                        </p>
                                        <p>
                                            <span style="font-size: 5rem;color: #FCB14C;" id="not_repack_num"></span><a
                                                href="" style="color: #FFFFFF;font-size: .8rem;">家</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 全国门店数 -->
                    <!-- <div class="order panel" style="flex: .65;margin-right: 20px;height: 96%;width: 100%;">
                    <div class="inner" style="display: flex;flex-direction: column;">

                        <div class="data" style="flex: .1;">
                            <span style="font-size: 1rem;">
                                <i class="icon-dot" style="color: #006CFF;"></i>
                                全国门店总数 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a style="font-size: 1rem;">
                                    1800家</a>
                            </span>
                        </div>

                        <div style="display: flex; flex-direction: column;flex: 1;justify-content:space-around;">
                            <div class="dayOrder" style="display: flex;justify-content: space-between;">
                                <p style="font-size: 1rem;color: #4c9bfd;">
                                    <em> <i class="iconfont"
                                            style="font-size: 1rem;color: #4c9bfd;margin-right: 5px;">&#xe63f;</i>5代店:</em>
                                    <em class="padding">30家</em>
                                </p>
                                <p style="font-size: 1rem;color: #4c9bfd;">
                                    <em> <i class="iconfont"
                                            style="font-size: 1rem;color: #4c9bfd;margin-right: 5px;">&#xe63f;</i>4代店:</em>
                                    <em class="padding">1700家</em>
                                </p>
                            </div>
                            <p style="font-size: 1rem;color: #4c9bfd;">
                                <em> <i class="iconfont"
                                        style="font-size: 1rem;color: #4c9bfd;margin-right: 5px;">&#xe63f;</i>待改装门店:</em>
                                <em class="padding">60家</em>
                            </p>
                            <p style="font-size: 1rem;color: #4c9bfd;">
                                <em> <i class="iconfont"
                                        style="font-size: 1rem;color: #4c9bfd;margin-right: 5px;">&#xe63f;</i>待重装门店:</em>
                                <em class="padding">70家</em>
                            </p>
                            <p style="font-size: 1rem;color: #4c9bfd;">
                                <em> <i class="iconfont"
                                        style="font-size: 1rem;color: #4c9bfd;margin-right: 5px;">&#xe63f;</i>5代店平均面积:</em>
                                <em class="padding">380平方</em>
                            </p>
                        </div>
                    </div>
                </div> -->

                    <!-- 弹出框 -->
                    <div id="box">
                        <span style="font-size: 1rem;position: absolute;right: .633333rem;" id="close">X</span>
                        <span id="box-title"></span>
                        <div style="overflow: auto;height:100%">
                            <table border="1"
                                style="width: 33.333333rem; height: 100%; margin: 2.083333rem auto;text-align: center;"
                                align="center" cellspacing="0" cellpadding="0" id="mapData2">
                                <tr style="height: 1.666667rem;">
                                    <th>品牌</th>
                                    <th>所属区域</th>
                                    <th>客户代号</th>
                                    <th>客户名称</th>
                                    <th>联系人</th>
                                    <th>联系电话</th>
                                    <th>区域经理</th>
                                    <th>评级</th>
                                    <th>状态</th>
                                    <th>是否德尚客户</th>
                                </tr>
                            </table>
                        </div>


                    </div>

                    <!-- 地图 -->
                    <div class="map" style="flex: 1;">
                        <h3>
                            <a href="javascript:;" data-type="quarter" id="existence"
                                class="existence active">全国门店分布</a>
                            <span href="" style="border-right: 1px solid #00f2f1;margin:  0  .416667rem;"></span>
                            <a href="javascript:;" data-type="quarter" id="blank" class="blank">空白招商区</a>
                        </h3>
                        <div class="chart">
                            <div class="geo" id="geo"></div>
                        </div>
                    </div>
                </div>
                <!-- 各区域门店数 -->
                <div class="monitor panel" style="flex: .65;">
                    <div class="inner">
                        <div class="tabs">
                            <a href="javascript:;" data-index="0" class="active">各区域门店数</a>
                            <!-- <a href="javascript:;" data-index="1">异常设备监控</a> -->
                        </div>
                        <div class="content" style="display: block;">
                            <div class="head" style="padding: 0.1rem 1.5rem;">
                                <span class="col" style="margin-top: 10px;width: 8rem;">区域</span>
                                <span class="col" style="margin-top: 10px;">门店数</span>
                                <span class="col" style="margin-top: 10px;">新5代店</span>
                                <span class="col" style="margin-top: 10px;">老5代店</span>
                                <span class="col" style="margin-top: 10px;">4代店</span>
                                <span class="col" style="text-align: center;">改装<br>实际 / 目标 &nbsp;&nbsp;&nbsp;完成率</span>
                                <span class="col" style="text-align: center;">重装<br>实际 / 目标 &nbsp;&nbsp;&nbsp;完成率</span>
                                <span class="col" style="text-align: center;">新增<br>实际 / 目标 &nbsp;&nbsp;&nbsp;完成率</span>
                            </div>
                            <div class="marquee-view">
                                <div class="marquee" id="marquee">

                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="column" style="flex: .4;">
                <!--年度目标-->
                <div class="monitor panel">
                    <div class="inner" style="display: flex;flex-direction: column;">
                        <div class="tabs" style="flex: .1;">
                            <a href="javascript:;" data-index="0" class="active">年度目标</a>
                            <!-- <a href="javascript:;" data-index="1">异常设备监控</a> -->
                        </div>
                        <div style="flex: 1;display: flex;flex-direction: column;justify-content: space-around;">
                            <div style="color: #4c9bfd;font-size: .75rem;">
                                <div style="display: flex;justify-content: space-around;">
                                    <span>新增目标</span><span>已完成</span><span>完成率</span>
                                </div>
                                <div
                                    style="display: flex;justify-content: space-around; margin-top: 5px;color: #FFFFFF;">
                                    <span>360家</span><span>300</span><span>83%</span>
                                </div>
                            </div>
                            <div style="color: #4c9bfd;font-size: .75rem;">
                                <div style="display: flex;justify-content: space-around;">
                                    <span>重装目标</span><span>已完成</span><span>完成率</span>
                                </div>
                                <div
                                    style="display: flex;justify-content: space-around;margin-top: 5px;color: #FFFFFF;">
                                    <span>360家</span><span>150</span><span>41%</span>
                                </div>
                            </div>
                            <div style="color: #4c9bfd;font-size: .75rem;">
                                <div style="display: flex;justify-content: space-around;">
                                    <span>改装目标</span><span>已完成</span><span>完成率</span>
                                </div>
                                <div
                                    style="display: flex;justify-content: space-around;margin-top: 5px;color: #FFFFFF;">
                                    <span>360家</span><span>180</span><span>50%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--月度目标-->
                <div class="monitor panel">
                    <div class="inner" style="display: flex;flex-direction: column;">
                        <div class="tabs" style="flex: .1;">
                            <a href="javascript:;" data-index="0" class="active">月度目标</a>
                            <!-- <a href="javascript:;" data-index="1">异常设备监控</a> -->
                        </div>
                        <div style="flex: 1;display: flex;flex-direction: column;justify-content: space-around;">
                            <div style="color: #4c9bfd;font-size: .75rem;">
                                <div style="display: flex;justify-content: space-around;">
                                    <span>新增目标</span><span>已完成</span><span>完成率</span>
                                </div>
                                <div
                                    style="display: flex;justify-content: space-around; margin-top: 5px; color: #FFFFFF;">
                                    <span>30家</span><span>25</span><span>83%</span>
                                </div>
                            </div>
                            <div style="color: #4c9bfd;font-size: .75rem;">
                                <div style="display: flex;justify-content: space-around;">
                                    <span>重装目标</span><span>已完成</span><span>完成率</span>
                                </div>
                                <div
                                    style="display: flex;justify-content: space-around;margin-top: 5px;color: #FFFFFF;">
                                    <span>30家</span><span>18</span><span>60%</span>
                                </div>
                            </div>
                            <div style="color: #4c9bfd;font-size: .75rem;">
                                <div style="display: flex;justify-content: space-around;">
                                    <span>改装目标</span><span>已完成</span><span>完成率</span>
                                </div>
                                <div
                                    style="display: flex;justify-content: space-around;margin-top: 5px;color: #FFFFFF;">
                                    <span>30家</span><span>15</span><span>50%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--超期预警-->
                <div class="monitor panel">
                    <div class="inner">
                        <div class="tabs">
                            <a href="javascript:;" data-index="0" class="active">超期预警</a>
                            <!-- <a href="javascript:;" data-index="1">异常设备监控</a> -->
                        </div>
                        <div class="content" style="display: block;">
                            <div class="head">
                                <span class="col" style="width: 7rem;">门店名称</span>
                                <span class="col">预警内容</span>
                                <span class="col" style="width: 5rem;">上样日期</span>

                            </div>
                            <div class="marquee-view">
                                <div class="marquee2" id="marquee2">
                                    <div class="row" style="font-size: .75rem;">
                                        <span class="col">天津武清店</span>
                                        <span class="col">重装</span>
                                        <span class="col">20210413</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row" style="font-size: .75rem;">
                                        <span class="col">赣州宁都店</span>
                                        <span class="col">改装</span>
                                        <span class="col">20210419</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row" style="font-size: .75rem;">
                                        <span class="col">南昌进贤店</span>
                                        <span class="col">重装</span>
                                        <span class="col">20210411</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row" style="font-size: .75rem;">
                                        <span class="col">杭州富阳店</span>
                                        <span class="col">改装</span>
                                        <span class="col">20210422</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row" style="font-size: .75rem;">
                                        <span class="col">长沙芙蓉店</span>
                                        <span class="col">重装</span>
                                        <span class="col">20210617</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row" style="font-size: .75rem;">
                                        <span class="col">武汉洪山店</span>
                                        <span class="col">改装</span>
                                        <span class="col">20210114</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row" style="font-size: .75rem;">
                                        <span class="col">东莞长安店 </span>
                                        <span class="col">重装</span>
                                        <span class="col">20210917</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row" style="font-size: .75rem;">
                                        <span class="col">广州黄埔店</span>
                                        <span class="col">改装</span>
                                        <span class="col">20210823</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row" style="font-size: .75rem;">
                                        <span class="col">合肥肥东店</span>
                                        <span class="col">重装</span>
                                        <span class="col">20210619</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
<!-- <script src="http://echarts.baidu.com/resource/echarts-liquidfill-1.0.4/dist/echarts-liquidfill.js"></script> -->
<script src="./js/md5.js"></script>
<script src="./js/china.js"></script>
<script src="./js/index.js"></script>
<script src="./js/mymap.js"></script>

</html>